<template>
  <fieldset>
    <legend>组件缓存</legend>
    <button @click="toggleTab"
      :class="{active:componentName==='tab'}">点击切换tab组件</button>
    <button @click="toggleOther"
      :class="{active:componentName==='other'}">点击切换其他组件</button>
    <!-- <tab></tab>
        <other></other> -->
    <keep-alive exclude="other">
      <div class="container"
        :is="componentName"></div>
    </keep-alive>
  </fieldset>
</template>

<script>
import tab from "../tab/index.vue";
import other from "../other/index.vue";
export default {
  components: {
    tab,
    other,
  },
  data() {
    return {
      componentName: "tab",
    };
  },
  methods: {
    toggleTab() {
      this.componentName = "tab";
    },
    toggleOther() {
      this.componentName = "other";
    },
  },
};
</script>

<style scoped>
.active {
  background-color: hotpink;
}
</style>